<template>
  <div class="container">
    <el-card>
      <!-- 引入组件 -->
      <subjects :isShowload="isShow">
        <template #left>
          <el-form-item label="学科名称" style="margin-left: 10px">
            <el-input v-model="subject" />
          </el-form-item>
          <el-form-item>
            <el-button @click="subject = ''">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </template>
        <template #right>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="showDialog = true"
            >新增学科</el-button
          >
        </template>
        <template #after>
          <span>数据一共{{ counts }}条</span>
        </template>
      </subjects>

      <!-- 表格部分 -->
      <el-table
        :data="subjectList"
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column label="序号" width="50" type="index" />
        <el-table-column label="学科名称" prop="subjectName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column
          label="创建日期"
          :formatter="replaceTime"
          prop="addDate"
          width="200"
        />
        <el-table-column label="前台是否显示" prop="isFrontDisplay" />
        <el-table-column label="二级目录" prop="twoLevelDirectory" />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="题目数量" prop="totals" />
        <el-table-column label="操作" width="300">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="
                $router.push(
                  `/subjects/directorys?id=${row.id}&name=${row.subjectName}`
                )
              "
              >学科分类</el-button
            >
            <el-button
              type="text"
              @click="
                $router.push({
                  path: '/subjects/tags',
                  query: { id: row.id, name: row.subjectName },
                })
              "
              >学科标签</el-button
            >
            <el-button type="text" @click="editSubject(row.id)">修改</el-button>
            <el-button type="text" @click="delSubject(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部页码 -->
      <footer>
        <el-pagination
          background
          :current-page.sync="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </footer>

      <!-- 弹窗 -->
      <subjectsAdd
        :showDialog.sync="showDialog"
        @addSubjects="addSubjects"
        :id="id"
        :courseName="courseName"
        @updateSubject="updateSubject"
        ref="detailSubject"
      />
    </el-card>
  </div>
</template>

<script>
import subjects from './subjects/index.vue'
import PageTools from '../components/Page-Tools.vue'
import { list, remove, detail } from '@/api/hmmm/subjects'
import subjectsAdd from '../components/subjects-add.vue'
import dayjs from 'dayjs'

export default {
  components: {
    subjects,
    PageTools,
    subjectsAdd
  },
  data () {
    return {
      isShow: false,
      subject: '',
      userForm: {},
      subjectList: [],
      page: 1,
      pagesize: 10,
      counts: null,
      currentPage: 1, // 当前页数
      showDialog: false,
      id: null,
      // 编辑功能的学科名称
      courseName: '',
      addDates: []
    }
  },
  created () {
    this.getSubjectsList()
  },
  methods: {
    // 获取detail列表详情
    async getSubjectsList () {
      const { data } = await list()
      this.counts = data.counts
      this.subjectList = data.items
      this.page = data.page
      this.addDates = this.subjectList.map((item) => {
        return dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    // 替换时间
    replaceTime (row) {
      for (const item of this.addDates) {
        if (item === dayjs(row.addDate).format('YYYY-MM-DD HH-mm-ss')) {
          return item
        }
      }
      return dayjs(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 页码大小变了刷新
    async handleSizeChange (val) {
      const { data } = await list({ pagesize: val })
      this.pagesize = val
      this.subjectList = data.items
    },
    // 当前页面变动时刷新
    async handleCurrentChange (val) {
      const { data } = await list({
        ...data,
        page: val,
        pagesize: this.pagesize
      })
      this.subjectList = data.items
    },
    // 搜索功能
    searchSubject (list) {
      this.subjectList = list.data.items
    },
    // 删除功能
    async delSubject (id) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          type: 'warning'
        })
        await remove({ id: id })
        this.getSubjectsList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 增加功能
    addSubjects () {
      this.getSubjectsList()
    },
    // 修改功能
    async editSubject (id) {
      this.showDialog = true
      this.id = id
      const subject = await detail({ id: id })
      // 通过获取子组件的方法来回弹数据
      this.$refs.detailSubject.getSubjectDetail(id)
    },
    // 编辑页面回传数据更新页面
    updateSubject (id) {
      this.id = id
      this.getSubjectsList()
    },
    // 搜索按钮功能
    async search () {
      const res = await list({ subjectName: this.subject })
      this.subjectList = res.data.items
    }
  }
}
</script>

<style scoped >
footer {
  float: right;
  margin: 20px;
}
</style>
